<template>
	<view class="page">
		<view class="toolHead">

			<view style="width: 150px;" @click="showTaskPicker=true"><u--input disabled color="#3C9CFF"
					disabled-color="white" placeholder="请输入内容" suffixIcon="arrow-down" v-model="searchText"
					border="surround"></u--input></view>
			<view><u-button style="width: 100px;" type="primary" :plain="true" text="任务上报"></u-button></view>
		</view>

		<view class="cardList">
			<view class="card-item">
				<view class="card-head">
					<view class="card-title">任务名称1</view>
					<view class="task-status">待完成</view>
				</view>
				<view class="card-content">
					<view>任务地点：</view>
					<view>火车站</view>
				</view>
				<view class="card-content">
					<view>任务状态：</view>
					<view>待完成</view>
				</view>
				<view class="card-content">
					<view>任务发布人：</view>
					<view>张三</view>
				</view>
				<view class="card-content">
					<view>当前审批人：</view>
					<view>张三</view>
				</view>
				<view class="card-content">
					<view>任务参与人：</view>
					<view>张三、李四</view>
				</view>
				<view class="card-content">
					<view>发布日期：</view>
					<view>2025-2-20</view>
				</view>
			
				<view>
					<view class="tool-box">
						<view style="width: 100px;margin-right: 10px;"> <u-button style="width: 100px;" type="success"
								:plain="true" text="器材查看"></u-button></view>
						<view style="width: 100px;"> <u-button style="width: 100px;" type="primary" :plain="true"
								text="流程查看"></u-button></view>
					</view>
					
				</view>
			</view>
		</view>
		<view>注：1.任务上报为线下安排任务，可由本人上报经过流程办结后进入任务中心，2.需确定流程具体是部门由几个人确定流程还是由本人点击到下一领导，领导通过后可办结。</view>
		<u-picker @cancel="showTaskPicker=false" :show="showTaskPicker" :columns="taskStateColumns"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchText: '所有',
				showTaskPicker: false,
				taskStateColumns: [
					['所有', '待完成', '已完成', '上报中']
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.toolHead {
		width: 100%;
		display: flex;
	}

	.cardList {
		width: 90%;

		.card-item {
			background-color: white;
			padding: 10px 8px;

			.card-head {

				display: flex;
				align-items: center;
				justify-content: space-between;

				.card-title {
					font-size: 20px;
					font-weight: 900;
				}

				.task-status {
					padding: 5px 3px;
					color: #3C9CFF;
					border: 1px solid #3C9CFF;
				}
			}

			.card-content {
				display: flex;
				justify-content: space-between;
				padding: 3px 0 3px 5px;
			}

			.tool-box {
				display: flex;
				padding-top: 10px;
				padding-bottom: 10px;
			}
		}
	}
</style>